@import url(common.less);
header{
    display: flex;
    flex-flow: column;
    position: relative;
    &>a{
        display: block;
        position:absolute;
        height: 120px;
        width:100%;
        background: url('../imgs/headimg.jpg') no-repeat;
        background-position: 50%;
        background-size: auto 120px;
        text-indent: -9999;
    }
    nav{
        margin-top:120px;
        display: flex;
        justify-content: space-between;
        height:40px;
        align-items: center;
        background-color: #333;
        
        ul{
            display:flex;
            margin-left:20px;
            li:hover #app-qrcode{
                display: flex;
            }
            li{
                margin:auto 8px;
                padding: auto 10px;
                position: relative;
                a:first-child{
                    color:#b0b0b0;
                    font-size: 12px;
                    &:hover{
                        color:white;
                    }
                    
                }
                a+a{              
                    #app-qrcode{
                        position:absolute;
                        box-shadow: 0 0 3px #ccc;
                        width:124px;
                        display: none;
                        top:30px;
                        left:-35px;
                        background-color: white;
                        justify-content: center;
                        &::after{
                            content:"小米商城APP";
                            position: absolute;
                            display: block;
                            z-index:9999;
                            font-size: 14px;
                            top:100px;
                        }
                        &::before{
                            //css伪类实现三角形
                            content: "";
                            width: 0px;
                            height: 0px;
                            position:absolute;
                            border-color:transparent transparent white transparent;
                            border-width: 10px;
                            border-style: solid;
                            top:-20px;
                        }
                        img{
                            display: block;
                            width:90px;
                            height:90px;   
                            margin-top:10px;
                            margin-bottom:25px;
                            position: relative;
                        }
                    }
                }
                
            }
        }

        .btns{
            margin-right: 20px;
            display: flex;
            a{
                color:#b0b0b0;
                font-size: 12px;
                &:hover{
                    color:white;
                }
                margin:auto 5px;
            }
            .shopping-car{
                // cursor: pointer;
                width:120px;
                height:40px;
                line-height: 40px;
                background-color: #424242;
                color:#b0b0b0;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items:center;
                position: relative;
                span{
                    margin-left:10px;
                }
                div+div{
                    position: absolute;
                    cursor: pointer;
                    width:260px;
                    height:110px;
                    right:-4px;
                    top:40px;
                    overflow:hidden;
                    z-index: -1;
                    div{
                        width:250px;
                        box-sizing: border-box;
                        height:100px;
                        margin-left:5px;
                        transform: translateY(-100%);
                        transition: .5s;
                        background-color: white;
                        box-shadow: 0 0 5px #ddd;
                        line-height: 100px;
                        text-align: center;
                        color:black;

                    }
                }
                &:hover{
                    cursor: pointer;
                    div>i{
                        color:white;
                    }
                    &>div:last-child{
                        z-index: 1;
                        cursor: pointer;
                        div{
                            transform: translateY(0);
                            
                        }
                    }
                }
            }
        }
    }
    .links{
        display: flex;
        height:100px;
        align-items: center;
        // border-bottom:1px solid #ddd;
        justify-content: space-between;
        &>a{
            margin-left:20px;
            
            width:55px;
            height:55px;
            background: url('../imgs/mi-logo.png') no-repeat;
            background-size: cover;
            background-color: @theme_color;
            &:hover{
                background-image: url('../imgs/mi-home.png');
            }
            
        }

        ul{
            display:flex;
            li{
                a{
                    font-size: 16px;
                    padding:0 10px;
                    color:rgb(82, 80, 80);
                }
                div{
                    position:absolute;
                    width:100%;
                    height:200px;
                    left:0px;
                    top:261px;
                    overflow: hidden;
                    cursor: pointer;
                    // z-index:1;
                    &>ul{
                        box-sizing: border-box;
                        border-bottom: 1px solid #ddd;
                        position:absolute;
                        background-color: white;
                        width:100%;
                        height:200px;
                        z-index: -999;
                        display: flex;
                        overflow: hidden;
                        // z-index: -1;
                        transform: translateY(-100%);
                        transition: 1s;
    
                        &>li:last-child::after{
                            content:'';
                            border:none;
                        }
                        li{
                            position: relative;
                            &::after{
                                content:'';
                                width:0;
                                height:70px;
                                border-right:1px solid #ddd;
                                position:absolute;
                                top:36px;
                                left:208px;
                            }
                            
                            // border-right: ;
                            // border-bottom: 1px solid rgb(155, 155, 155);
                            
                            list-style: none;
                            display: flex;
                            flex-flow: column;
                            justify-content: center;
                            align-items: center;
                            background-color: #fff;
                            width:16.66%;
                            height:100%;
                            img{
                                width:160px;
                                height:110px;
                                // margin:auto;
                                // border-right: 1px solid #ddd;
    
                            }
                            span{
                                font-size: 12px;
                                align-self: center;
                            }
                            span:first-of-type{
                                margin-top:20px;
                                color:rgb(107, 107, 107);
                            }
                            span:last-of-type{
                                margin-top:12px;
                            }
    
                            .price{
                                color:@theme_color;
                            }
                        }
                    }
                }
            }
            a:hover{
                // &>a{
                    color:@theme_color;
                // }
                // &>a+div{
                // }
                &+div>ul{
                    z-index: 999;
                    display: flex;
                    transform: translateY(0);
                    li{
                        display: flex;
                        cursor: pointer;
                    }
                    border-bottom: 1px solid #ddd;
                }
            }
        }

        ul+div{
            margin-right: 20px;
            display: flex;
            input{
                width:245px;
                height:50px;
                box-sizing: border-box;
                padding-left:20px;
                font-size: 14px;
                outline: none;
                border:1px solid #ddd;
                &:focus{
                    border-color: @theme_color;
                }
            }
            i{
                display: block;
                box-sizing: border-box;
                width:50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border:1px solid #ddd;
                border-left:none;
                cursor:pointer;
                &:hover{
                    border-color: @theme_color;
                    background-color:@theme_color;
                    color:white;
                }
            }
        }
    }
}
header+div{
    display: flex;
    flex-flow: column;
    main{
        display: flex;
        margin-top: 2px;
        flex-direction: row;
        margin-left: 20px;
        position:relative;
        .main-left{
            height:460px;
            position: absolute;
            top:0;
            left:0;
            background-color:rgba(0,0,0,.3);
            z-index:2;
            div{
                width:200px;
                color:white;
                display: flex;
                justify-content: space-between;
                padding:20px;
                font-size: 16px;
                cursor: pointer;
                &:hover{
                    background-color: @theme_color;
                }
                span{
                    // margin-left: 20px;
                }
                i{
                    // margin-right: 20px;
                }
            }
        }
    
        .swiper{
            flex-grow: 1;
            height:460px;
            overflow:hidden;
            margin-right:20px;
            margin-bottom: 20px;
            ul{
                @keyframes swipermove {
                    to{
                        transform: translateX(-1226px * 5);
                    }
                }
                
                animation-name: swipermove;
                animation-duration: 10s;
                animation-iteration-count: infinite;
                animation-fill-mode: forwards;
                animation-timing-function: steps(5,end);
                display: flex;
                li{
                    a{
                        cursor:pointer;
                        img{
                            display: block;
                            height:460px;
                        }
                    }
                }
            }
        }
    
    
    }
    .cardgroup{
        // margin-bottom: 200px;
        height:170px;
        display: flex;
        margin-left:20px;
        margin-right: 20px;
        justify-content: space-between;
        
        &>div:not(&>div:first-child){
            cursor: pointer;
        }



        &>div:first-child{
            background-color: #5f5750;
            width:228px;
            height: 170px;
            display: flex;
            flex-flow: row wrap;
            align-content: center;
            li{
                list-style: none;
                display: block;
                width:33%;
                height:50%;
                position:relative;
                cursor: pointer;
                &:nth-child(1){
                    background: url('../imgs/小米秒杀.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'小米秒杀';
                            top:55%;
                            left:18%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }

                &:nth-child(2){
                    background: url('../imgs/企业团购.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'企业团购';
                            top:55%;
                            left:18%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }

                &:nth-child(3){
                    background: url('../imgs/F码通道.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'F码通道';
                            top:55%;
                            left:18%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }

                &:nth-child(4){
                    background: url('../imgs/米粉卡.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'米粉卡';
                            top:55%;
                            left:26%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }

                &:nth-child(5){
                    background: url('../imgs/以旧换新.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'以旧换新';
                            top:55%;
                            left:18%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }

                &:nth-child(6){
                    background: url('../imgs/话费充值.png') no-repeat center 30%;
                    background-size:24px 24px;
                    // border:1px solid white;
                    a{
                        font-size: 12px;
                        color:rgb(209, 208, 208);
                        &::after{
                            content:'话费充值';
                            top:55%;
                            left:18%;
                            position:absolute;
        
                        }
                    }
                    &:hover{
                        filter: drop-shadow(white 0px 0);   
                    }
                }
    


            }

        }
        &>div:nth-child(2){
            width:316px;
            height: 170px;
            background: url('../imgs/cardgroup1.jpg') no-repeat;
            background-size: cover;
            &:hover{
                box-shadow: 0 0 6px rgba(0, 0, 0, .3);
            }
        }
        &>div:nth-child(3){
            width:316px;
            height: 170px;
            background: url('../imgs/cardgroup2.jpg') no-repeat;
            background-size: cover;
            &:hover{
                box-shadow: 0 0 6px rgba(0, 0, 0, .3);
            }
        }
        &>div:nth-child(4){
            width:316px;
            height: 170px;
            background: url('../imgs/cardgroup3.jpg') no-repeat;
            background-size: cover;
            &:hover{
                box-shadow: 0 0 6px rgba(0, 0, 0, .3);
            }
        }
    }
    .mi-second{
        padding:10px 20px;
        margin-top: 20px;
        background-color:#f5f5f5;
        &>div{
            display: flex;
            flex-direction: column; 
            &>.title{
                height:60px;
                display: flex;
                justify-content: space-between;
                align-items:center;
                span{
                    font-size: 22px;
                    font-weight: 200;
                    color:#333;
                }

                .btns{
                    i{
                        color:rgb(68, 67, 67);
                    }
                    i:first-child{
                        color:rgb(99, 97, 97);
                    }
                    i{
                        margin:0px;
                        // margin:6px;
                        padding:5px 16px;
                        border:2px solid #ddd;
                        cursor: pointer;
                    }
                }
            }

            .title+div{
                display: flex;
                justify-content: space-between;
                &>div:nth-child(1){
                    border-top:1px solid #e53935;
                    width:18%;
                    height:340px;
                    background-color:#f1eded;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    &>span:nth-of-type(1){
                        color:@theme_color;
                        font-size: 21px;
                        margin-bottom:30px;
                        font-weight: bold;
                    }
                    i{
                        color:@theme_color;
                        transform: rotate(20deg);
                        font-weight: bold;
                        margin-bottom:30px;
                    }
                    &>span:nth-of-type(2){
                        font-size: 15px;
                        color:rgba(0, 0, 0, .54);
                        margin-bottom:26px;
                    }
                    span+div{
                        font-size:28px;
                        span{
                            display: inline-block;
                            color:white;
                            line-height: 46px;
                            width:46px;
                            height:46px;
                            background-color: #605751;
                            font-size:24px;
                            text-align: center;
                        }
                        .hour{

                        }

                        .minute{

                        }

                        .second{

                        }
                    }
                }
                
                &>div:nth-child(n+2){
                    cursor:pointer;
                    &:hover{
                        box-shadow: 0 0 5px rgba(0, 0, 3px, .2);
                    }
                    // border-top:1px solid #e53935;
                    width:18%;
                    height:340px;
                    background-color:white;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    
                    .thump{
                        img{
                            width:160px;
                            height:160px;
                        }
                    }

                    h3{
                        align-self: center;
                        font-size: 14px;
                        font-weight: 400;
                        color:#212121;
                        
                        margin-top:20px;
                        overflow: hidden;
                        width:80%;
                        margin:20px auto;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:nth-of-type(1){
                        color:#b0b0b0;
                        font-size: 12px;
                        margin-bottom:12px;
                        margin-top:10px;
                    }
                    p:nth-of-type(2){
                        color:@theme_color;
                        font-size: 14px;
                        span{

                        }
                        del{
                            color:#b0b0b0;
                        }
                    }
                }

                &>div:nth-child(2){
                    border-top:1px solid #ecae27;
                }
                &>div:nth-child(3){
                    border-top:1px solid #36b616;
                }
                &>div:nth-child(4){
                    border-top:1px solid #27aeec;
                }
                &>div:nth-child(5){
                    border-top:1px solid #ec4427;
                }
            }
        }
    }
    .banner{
        display: block;
        padding:20px;
        background-color:#f5f5f5;
        // width:1226px;
        // height:120px;
        
        img{
            width:100%;
            height:100%;
            // padding:20px;
        }       
    }
    .mi-phone{
        padding:0px 20px;
        background-color:#f5f5f5;
        &>div{
            display: flex;
            flex-direction: column; 
            &>.title{
                height:60px;
                display: flex;
                justify-content: space-between;
                align-items:center;
                span{
                    font-size: 22px;
                    font-weight: 200;
                    color:#333;
                }

                .btns{
                    cursor: pointer;
                    span{
                        font-size: 16px;
                    }
                    i{
                        color:rgb(68, 67, 67);
                    }
                    i:first-child{
                        color:rgb(99, 97, 97);
                    }
                    i{
                        margin:0px;
                        padding:5px 6px;
                        cursor: pointer;
                    }

                    &:hover{
                        i{
                            color:@theme_color;
                        }
                        span{
                            color:@theme_color;
                        }
                        // background-color:red;
                        // filter: drop-shadow(red,0px 0);   
                    }
                }
            }

            &>.title+div{
                display: flex;
                flex-direction: row;
                &>div.left{
                    a{
                        img{
                            width:234px;
                            height:614px;
                        }
                    }
                }

                &>div.right{
                    flex:1;
                    margin-left: 20px;
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: space-between;
                    align-items: center;
                    height:614px;
                    &>div{
                        width:23%;
                        height:48%;
                        cursor:pointer;
                        &:hover{
                            box-shadow: 0 0 5px rgba(0, 0, 3px, .2);
                        }
                        // border-top:1px solid #e53935;
                        background-color:white;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        
                        .thump{
                            img{
                                width:160px;
                                height:160px;
                            }
                        }

                        h3{
                            align-self: center;
                            font-size: 14px;
                            font-weight: 400;
                            color:#212121;
                            
                            overflow: hidden;
                            width:80%;
                            text-align: center;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        p:nth-of-type(1){
                            color:#b0b0b0;
                            font-size: 12px;
                            margin-bottom:12px;
                            margin-top:10px;
                        }
                        p:nth-of-type(2){
                            color:@theme_color;
                            font-size: 14px;
                            span{

                            }
                            del{
                                color:#b0b0b0;
                            }
                        }
                    }
                }
            }
        }
    }
}
footer{
    display: flex;
    flex-flow: column;
    padding:20px;
    ul{
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-around;
        li{
            border-right: 1px solid #ddd;
            &:last-child{
                border-right: none;
            }
            cursor: pointer;
            &:hover{
                a{
                    color:@theme_color;
                }
                i{
                    color:@theme_color;
                }
            }
            flex:1;
            text-align: center;
            font-size: 16px;
            i{
                margin-right: 5px;
            }
        }
    }
    .footer-links{
        margin-top:40px;
        display: flex;
        &>div{
            height:172px;
        }
        &>div:nth-child(-n+6){
            flex:13.33;
            &>div{
                font-size: 14px;
                margin-bottom: 20px;
            }
            div+div{

                p{
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
        &>div:last-child{
            height:210px;
            flex:20;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: column;
            &>p:nth-of-type(1){
                color:@theme_color;
                font-size: 22px;
                margin-bottom: 6px;
            }
            &>p:nth-of-type(2){
                font-size: 12px;
                color:#616161;
                margin-bottom: 5px;
            }
            a{
                display: block;
                width:118px;
                height:28px;
                border:1px solid @theme_color;
                display: flex;
                justify-content: center;
                margin:10px auto;
                align-items: center;
                &:hover{
                    background-color: @theme_color;
                    color:white;
                }
                i{

                }
                span{
                    font-size: 12px;
                }
            }
            &>p:nth-of-type(3){
                cursor: pointer;
                &:hover{
                    span{
                        color:@theme_color;
                        font-weight: bold;
                    }
                    color:@theme_color;
                }
                span{
                    font-size: 12px;
                    color:#616161;
                    margin-right: 3px;
                }
            }
        }
    }
    .site-info{
        padding:30px 0;
        background-color: #fafafa;
        display: flex;
        img{
            width:57px;
            height:57px;
            background-color: @theme_color;
            margin-right:20px;
        }
        img+div{
            font-size: 12px;
            margin-right:100px;
            p:first-child{
                color:#757575;
            }
            p:last-child{
                color:#b0b0b0;

            }
        }
    }
}
